<template>
  <div>
    <Product :items="product" :title="title" />
  </div>
</template>

<script>
import Product from '../../components/user/Produce.vue'
export default {
    components: { Product },
    data() {
        return {
            product: [],
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            title: '搜 索 结 果'
        }
    },
    // 监听数据变化
    watch: {
        // 要监听的数值
        '$route.query.searchName': {
            // 属性变化时要执行的处理函数
            handler: 'init',
            // 是否在组件创建时立即执行 handler 中的方法
            immediate: true
        }
    },
    methods: {
        init() {
            // 获取要查询的数据
            this.queryInfo.query = this.$route.query.searchName
            this.getProduct()
        },
        async getProduct() {
            const { data: res } = await this.$axios.get('/product/search', { params: this.queryInfo })
            if (res.code !== 200) {
                this.title = '没 有 查 到 该 商 品'
                return this.$message.error('没有查到相关数据 ')
            }
            this.product = res.data.product
        }
    }
}
</script>

<style>

</style>
